import React, { useEffect, useContext, useState,useCallback } from 'react'
import { CateWrapper } from './styledCate'
import httpContext from '@/context/httpContext'
import {useHistory} from 'react-router-dom'


export default function Catelist(props) {
    const list = props.list
    const history=useHistory()
    // console.log(props);

    // const { get } = useContext(httpContext)
    // const [recommend, setRecommend] = useState([])
    // const [isLoading, setIsLoading] = useState(false)

    // const loadData = async () => {
    //     let res = await get({
    //         url: 'http://localhost:9000/categroydetail'
    //     })
    //     // console.log(res.data.data.list);
    //     setRecommend(res.data.data.list)
    //     setIsLoading(true)
    // }

    // useEffect(
    //     () => {
    //         loadData()
    //     }, []

    // )
    const handleClick=useCallback(
        (name)=>{
           return()=>{
            //    console.log(name);
            history.push('/list',{name})
           }
        },[]
    )

    return (
        <CateWrapper>
            {
                list.map((item, index) => {
                    return (
                        <div className='cate' key={index}>
                            <h1 >
                                <span>———</span> &nbsp;&nbsp; {item.brand.brandName} &nbsp;&nbsp;<span>———</span>
                            </h1>
                            <div className='products'>
                                <ul >
                                    {
                                        item.seriesList.map((item, index) => {
                                            return (
                                                <li key={index}
                                                onClick={handleClick(item.name)}
                                                >
                                                    <img src={item.coverUrl} alt="" />
                                                    <p>{item.name}</p>
                                                </li>
                                            )
                                        })
                                    }
                                </ul>
                            </div>
                        </div>
                    )
                })
            }

        </CateWrapper>
    )
}
